<template>
  <div>
      选择颜色是：{{color}}
      <div>
          <el-button @click="color='red'">红色</el-button>
          <el-button @click="color='yellow'">黄色</el-button>
          <el-button @click="color='green'">绿色</el-button>
      </div>
      <child/>
      <div v-for="(item,i) in chooseList" :key="i">
          <chooseM :chooseData="item" />
      </div>
      <el-button @click="showChooseData">保存</el-button>
  </div>
</template>

<script lang="ts">
import {defineComponent, ref, provide,reactive} from "vue"
import child from "./component/child.vue"
import chooseM from '@/views/provide_inject/component/ChooseM.vue';
export default defineComponent({
    components:{child,chooseM},
    setup(){
        const color = ref("red");
        const chooseList = reactive([{
            name:"check1",
            choose:false,
            children:[{name:"选项1",choose:false},{name:"选项2",choose:false}]
        },{
            name:"check2",
            choose:false,
            children:[{name:"选项1",choose:false},{name:"选项2",choose:false}]
        }])
        provide("color",color)
        const showChooseData = () =>{
            console.log(chooseList)
        }
        const showCom = ref(true)
        return {
            color,
            chooseList,
            showChooseData,
            showCom
        }
    }
})
</script>

<style>

</style>